import { Tabs,Button } from "antd-mobile";
import { Tab } from "antd-mobile/es/components/tabs/tabs";
import { Component } from "react";
import { getcinemainfo, getcelimamovieinfo } from '../apis/movie'
import style from './cinema.module.css'
import Header from "../component/Header/header";

export default class Cinema extends Component{
    state={
        cinemaobj:{},
        cinmovielist:[],  // 当前影院上映
        curmovie:{},
        cinSelectMovieIndex:0,
        tdata:{},
        curtintlist:[],
        curmovieId:2
    }

    async componentDidMount(){
        // 取session的数据
        let obj=JSON.parse(sessionStorage.getItem('cinema'))
        // 把传过来的对象保存在状态中
        this.setState({
            cinemaobj:obj
        })
        let res = await getcinemainfo({cid:obj.cid})
        // console.log(res.data.data);
        this.setState({
            cinmovielist:res.data.data,
            curmovie:res.data.data[0]
        })

        let tintdata =await getcelimamovieinfo({
            cid:obj.cid,
            mid:res.data.data[0].id
        })
        this.setState({
            tdata:tintdata.data.data,
            curtintlist:tintdata.data.data['9-9']
        })
    }

    render(){
        // console.log(this.state.cinmovielist);
        let {cinemaobj,cinmovielist,cinSelectMovieIndex,curmovie,curtintlist,tdata} = this.state
        // console.log(Object.keys(tdata));
        return(
            <>
            <Header title="cnima" onBack={this.onBack} />
            <div className={style.content}>
                <h3>{cinemaobj.name}</h3>
                <p>{cinemaobj.address}</p>
                <p>{cinemaobj.type}</p>

                {/* <p>《{curmovie.name}》</p> */}

                {/* 横向滚动 */}
                <div className={style.imageItems} >
                        {cinmovielist.map((item,index)=><img
                        key={item.id}
                        src={item.image}
                        className={cinSelectMovieIndex===index?style.cinSelectMovie:style.cinemaListMovie}
                        onClick={this.clickMovie.bind(this,item,index)}>
                        </img>)}
                </div>

                <p>《{curmovie.name} 》 评分：{curmovie.point}</p>
                <p>时长：{curmovie.time}分钟 {curmovie.type}</p>

                <Tabs defaultActiveKey='9-9' onChange={this.clickDate}>
                    {Object.keys(tdata).map((item,index)=><Tabs.Tab key={item} title={item}>
                        {/* {item} */}
                    </Tabs.Tab>)}       
                </Tabs>

                {
                    curtintlist.map((item)=><div className={style.sale} key={item.id}>
                        <p>{item.starttime}--{item.endtime} {item.name} {item.type}  ￥:{item.price}
                        <Button color="primary" size="mini" style={{height:'28px',float:'right',marginRight:'18px'}} onClick={this.clickByTicket.bind(this,item.id)}>购票</Button>
                        </p>
                    
                    </div>)
                }
            </div>

            </>
        )
    }
    async clickMovie(item,index){
        // console.log(item,index);
        this.setState({
            curmovie:item,
            // curSelectMovieIndex:index,
            cinSelectMovieIndex:index,
            curmovieId:item.id
        })
        // 获取点击电影的放映数据
        let res = await getcelimamovieinfo({
            cid:this.state.cinemaobj.cid,
            mid:this.state.curmovieId
        })
        // console.log(res.data.data);
        this.setState({
            tdata:res.data.data,
            curtintlist:res.data.data['9-9']
        })
    }  
    
    clickDate= async(item) => {
        // console.log(item);
        let res = await getcelimamovieinfo({
            cid:this.state.cinemaobj.cid,
            mid:this.state.curmovieId
        })
        this.setState({
            tdata:res.data.data,
            curtintlist:res.data.data[item]
        })
    }

    // 购票
    clickByTicket (id) {
        // console.log(id);
        sessionStorage.setItem('tintid',id)
        if(localStorage.getItem('islogin') == true){
            window.location.href = '/#/seat'
        }else {
            window.location.href = '/'
        }
    }

    // 返回
    onBack = () => {
        this.props.history.push('/nav');
    }

}